<template>
  <div class="popout-bg" @click.self="handleClose">
    <div class="popout" ref="popout">
      <span
        title="关闭"
        class="el-icon-close close"
        @click="handleClose"
      ></span>
      <h2 class="title">探索思政元素</h2>
      <div class="popout-wrap">
        <div
          :class="['first-data', { active: v.id == active }]"
          v-for="v in data"
          :key="v.id"
        >
          <p class="first-title" @click="handleClick(v)">
            {{ v.name }} <span class="el-icon-arrow-right"></span>
          </p>
          <ul class="popout-ul">
            <li class="second-data" v-for="m in v.childList" :key="m.id">
              <span @click="toSearch(v.name, m.name, '', '', m.childList)">{{
                m.name
              }}</span>
              <div class="third-data" v-if="m.childList.length">
                <p
                  v-for="n in m.childList"
                  :key="n.id"
                  @click="toSearch(v.name, m.name, n.name, n.id)"
                  >{{ n.name }}</p
                >
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSession, setSession } from '@/utils/session'
export default {
  data() {
    return {
      active: '',
    }
  },
  props: ['data'],
  mounted() {
    this.active = this.data.length ? this.data[0].id : ''
  },
  methods: {
    handleClick(v) {
      this.active = v.id
    },
    handleClose() {
      this.$emit('e-close')
    },
    toSearch(v, m, n, id, childList) {
      var data = {
        name: v,
        cName: m,
        childName: n,
        childId: id,
        childList: childList,
      }

      this.$store.commit('SETPOLITICAL', data)
      // setSession("politicalPoints", JSON.stringify(data))
      this.$router.push({
        path: '../advancedSearch',
        query: { type: 9, points: 2 },
      })
      this.$emit('e-close')
    },
  },
}
</script>
<style scoped lang="scss">
.popout-wrap {
  .first-data {
    padding-left: 20px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    .first-title {
      position: relative;
      height: 46px;
      line-height: 46px;
      font-size: 16px;
      color: #333;
      span {
        position: absolute;
        right: 10px;
        top: 14px;
        font-size: 18px;
        font-weight: bold;
        color: #999;
      }
    }
  }
  .popout-ul {
    display: none;
    li {
      position: relative;
      padding: 10px;
      line-height: 1.4;
      font-size: 14px;
      color: #333;
      border-right: 3px solid transparent;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: 0 none;
      }
      &:hover {
        border-right: 3px solid var(--colorH1);
        background: #f5f5f5;
        .third-data {
          display: block;
        }
      }
      .third-data {
        display: none;
        position: absolute;
        left: 101%;
        top: 0;
        width: 240px;
        // padding: 10px 0;
        border: 1px solid #eee;
        background: rgba(255, 255, 255, 1);
        p {
          padding: 8px;
          line-height: 1.6;
          font-size: 14px;
          color: #666;
          border-bottom: 1px dashed #eee;
          &:last-child {
            border-bottom: 0 none;
          }
          &:hover {
            color: var(--colorH1);
          }
        }
      }
    }
  }
  .active {
    .popout-ul {
      display: block;
    }
    .first-title {
      span {
        transition: all 0.3s;
        transform: rotate(90deg);
      }
    }
  }
}
.popout {
  position: fixed;
  left: 0;
  top: 100px;
  width: 300px;
  height: 800px;
  background: #f2f2f2;
  .close {
    position: absolute;
    right: 10px;
    top: 18px;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    &:hover {
      color: var(--colorH1);
    }
  }
  .title {
    color: #333;
    height: 54px;
    line-height: 54px;
    text-align: center;
  }
}
.popout-bg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
</style>